<template>
  <div class="root">
    <div class="step-content">
      <div class="step-card">
        <div class="step-item">
          <span class="step-number">1</span
          ><span class="step-title">基础信息</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <span class="step-number">2</span
          ><span class="step-title">匹配规则</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <span class="step-number step-active">3</span
          ><span class="step-title">产品分配</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <span class="step-number">4</span
          ><span class="step-title">活动设置</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <span class="step-number">5</span
          ><span class="step-title">发布确认</span>
        </div>
      </div>
    </div>
    <div class="info-card card">
      <div class="title-card">
        <div class="title">拍卖活动基础信息</div>
      </div>
      <div class="info-form">
        <el-form label-position="top" :model="params">
          <el-row :gutter="60">
            <el-col :span="9">
              <el-form-item label="活动名称">
                <el-input placeholder="请输入活动名称" v-model="params.title" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="活动时间">
                <el-date-picker
                  v-model="params.time"
                  type="datetime"
                  placeholder="请选择活动时间"
                  prefix-icon="Calendar"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="活动描述">
                <el-input
                  type="textarea"
                  placeholder="请输入活动描述"
                  v-model="params.intro"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="product-card card">
      <div class="title">参与活动产品</div>
      <div class="product-radio">
        <el-radio-group v-model="radioValue">
          <el-radio-button
            class="radio-item"
            v-for="item in radioList"
            :key="item.label"
            :label="item.label"
          >
            {{ item.count > 0 ? `${item.name} (${item.count})` : item.name }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="product-table-card">
        <!-- 表格数据 -->
        <el-table
          class="product-table"
          v-loading="loading"
          :data="dataList"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80"
          />
          <el-table-column label="SKU CODE" prop="code" width="240" />
          <el-table-column label="产品名称" prop="title" width="380" />
          <el-table-column
            label="货量(箱)"
            align="center"
            prop="total"
            width="220"
          >
            <template #default="scope">
              <el-input-number v-model="scope.row.total" :min="1" :max="99"
            /></template>
          </el-table-column>
          <el-table-column label="价格" prop="price" width="150">
            <template #default="scope">
              <span>{{ `${scope.row.price}  CNY/箱` }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="最小订货量(箱)"
            prop="minNumber"
            align="center"
            width="220"
          >
            <template #default="scope">
              <el-input-number v-model="scope.row.minNumber" :min="1" :max="99"
            /></template>
          </el-table-column>
          <el-table-column label="利润" align="center" prop="profit">
            <template #default="scope">
              <el-tag
                :class="[scope.row.profit > 30 ? 'profit-green' : 'profit-red']"
                type="info"
                >{{ scope.row.profit }}%</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="product-pagination">
          <pagination
            v-show="total > 0"
            :total="total"
            layout="total, prev, pager, next"
            v-model:page="pageNum"
            v-model:limit="pageSize"
          />
        </div>
      </div>
    </div>

    <div class="footer" :class="classObj">
      <el-button type="primary" class="btn-back" @click="handleBack"
        >返回</el-button
      >
      <div>
        <el-button @click="handleNextStep">下一步</el-button>
        <el-button>保存</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import useAppStore from "@/store/modules/app";
const sidebar = computed(() => useAppStore().sidebar);
const classObj = computed(() => ({
  hideSidebar: !sidebar.value.opened,
}));
const router = useRouter();
const params = ref({
  title: "",
  time: "",
  intro: "",
});
const radioValue = ref(0);
const radioList = ref([
  {
    name: "Allocated G7",
    label: 0,
    count: 20,
  },
  {
    name: "Allocated Commodity",
    label: 1,
    count: 0,
  },
  {
    name: "Competitive Commodit",
    label: 2,
    count: 0,
  },
  {
    name: "Competitive G7",
    label: 3,
    count: 8,
  },
]);
const dataList = ref([
  {
    code: "SKU20231100001",
    title: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 60,
  },
  {
    code: "SKU20231100002",
    title: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 25,
  },
  {
    code: "SKU20231100003",
    name: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 60,
  },
  {
    code: "SKU20231100004",
    title: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 60,
  },
  {
    code: "SKU20231100005",
    title: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 60,
  },
  {
    code: "SKU20231100006",
    title: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 60,
  },
  {
    code: "SKU20231100007",
    title: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 60,
  },
  {
    code: "SKU20231100008",
    title: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 60,
  },
  {
    code: "SKU20231100009",
    title: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 60,
  },
  {
    code: "SKU20231100010",
    title: "新西兰进口 ps级 天然草饲 牛尾骨",
    total: 30,
    price: 500,
    minNumber: 5,
    profit: 60,
  },
]);
const total = ref(12);
const pageNum = ref(1);
const pageSize = ref(10);
function handleNextStep() {
  router.push("/headquarters/auctioncenter/matchingrules");
}
function handleBack() {
  router.back();
}
</script>
<style lang="scss" scoped>
.root {
  padding-bottom: 64px;
  .step-content {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 20px 24px 0 24px;
    .step-card {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .step-item {
        .step-number {
          padding: 4px 8px;
          background-color: #ecedec;
          color: #000000;
          margin-right: 4px;
        }
        .step-active {
          background-color: #000000;
          color: #ffffff;
        }
        .step-title {
        }
      }
      .step-line {
        display: block;
        width: 30px;
        height: 1px;
        border: 1px solid #000000;
        margin: 0 8px;
      }
    }
  }
  .title-card {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #000000;
      line-height: 25px;
    }
  }
  .card {
    padding: 24px 24px 0 24px;
  }
  .info-card {
    border-bottom: 1px solid #dadbda;
    .info-form {
      padding: 16px;
      ::v-deep(.el-input__wrapper) {
        background-color: #f4f4f4;
      }
      ::v-deep(.el-textarea__inner) {
        background-color: #f4f4f4;
      }
    }
  }
  .product-card {
    .product-radio {
      padding: 16px;
      .radio-item {
        margin-right: 10px;
        ::v-deep(.el-radio-button__inner) {
          border-left: var(--el-border);
        }
      }
    }
    .product-table-card {
      padding: 16px;
      margin-bottom: 30px;
      .product-table {
        border: 1px solid #dadbda;
        ::v-deep(.el-input__wrapper) {
          background-color: #f4f4f4;
        }
        .profit-green {
          color: #0b8c49;
          font-size: 14px;
          font-weight: 400;
        }
        .profit-red {
          color: #be2b50;
        }
      }
      .product-pagination {
        position: relative;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 200px !important;
    right: 0;
    height: 64px;
    background-color: #000000;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    button {
      padding: 0 26px;
      border-radius: 0;
    }
    .btn-back {
      border: 1px solid #ffffff;
    }
  }
  .hideSidebar {
    left: 54px !important;
  }
}
</style>
